<template>
  <div class="it-header">
    <div v-show="!from && showAvatar" class="header-firstpage">
      <img class="header-avatar" :src="userInfo.userPicture">
      <span class="header-username">{{userInfo.username}}</span>
    </div>
    <div v-show="from" @click.stop.prevent="back" class="header-secondpage">
      <slot>
        <i class="mintui mintui-back" aria-hidden="true"></i>
      </slot>
    </div>
    <div class="header-title">{{title}}</div>
    <div class="header-right">
      <slot name="header-right"></slot>
    </div>
  </div>
</template>
<script>
import userAvatar from '../../assets/user-avatar.jpg'
import defaultAvatar from '../../assets/default-avatar.jpg'
export default {
  props: {
    /*
     * from: {Object | String | Boolean} [不传值默认会隐藏返回按钮，代替显示用户头像]
     * {Object}: 路由对象
     * {String}: 路由名称
     * {Boolean}: [true,显示返回按钮或文字,点击不返回而是触发绑定的@back自定义事件]
     *          [false,隐藏返回按钮]
     * */
    from: {
      type: [Object, String, Boolean]
    },
    title: {
      type: String
    },
    /*
     * showAvatar 当需要既不显示头像，又不显示返回按钮，则传入false
     * */
    showAvatar: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    userInfo() {
      return {
        userPicture: this.$store.state.isLoggedIn ? userAvatar : defaultAvatar,
        username: this.$store.state.userInfo.username
      }
    }
  },
  methods: {
    back: function() {
      var targetRoute
      if (typeof this.from === 'boolean') {
        this.$emit('back')
        return
      } else if (typeof this.from === 'object') {
        targetRoute = this.from
      } else if (typeof this.from === 'string') {
        targetRoute = { name: this.from }
      }
      this.$router.replace(targetRoute)
    }
  }
}

</script>
<style lang="scss" rel="stylesheet/scss">
@import "../../common/scss/variables";

.it-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $header-height;
  line-height: $header-height;
  background: #5396c5 {
    size: cover;
  }
  z-index: 10;

  .header-firstpage,
  .header-secondpage {
    position: absolute;
    top: 0;
    left: 0.2rem;
  }
  .header-secondpage {
    left: 0;
    min-width: 40px;
    height: 100%;
    color: #fff;
    i {
      margin-left: 0.2rem;
      line-height: 0.82rem;
      font-size: 1.5em; // 介于fa-2x和fa-3x之间合适
    }
    .close-text {
      margin-left: 0.2rem;
      line-height: 0.82rem;
      font-size: 0.28rem;
    }
    &:active {
      background-color: #999;
    }
  }
  .header-avatar {
    width: 0.72rem;
    height: 0.72rem;
    margin-right: 0.1rem;
    border: 2px solid #fff {
      radius: 50%;
    }
    vertical-align: middle;
    box-sizing: border-box;
  }
  .header-title {
    color: #fff;
    font-size: 0.36rem;
    text-align: center;
  }
  .header-username {
    vertical-align: middle;
    color: #fbf8f8;
  }
  .header-right {
  	position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    min-width: $header-height;
    font-size: 0.36rem;
    color: #fff;
    i.icon {
    	
    	font-size: 0.5rem;
    }
  }
}

</style>
